<template>
    <div class="tech-container">
        <!-- Global Header -->
        <global-header />

        <!-- Futuristic Background Elements -->
        <div class="tech-grid"></div>
        <div class="data-lines"></div>
        <div class="data-dashboard-circles"></div>
        <div class="rotating-gear top-left"></div>
        <div class="rotating-gear bottom-right"></div>



        <!-- 流星特效 -->
        <div class="meteor meteor-1"></div>
        <div class="meteor meteor-2"></div>
        <div class="meteor meteor-3"></div>

        <!-- Holographic scanner effect -->
        <div class="scan-line"></div>

        <!-- Main content wrapper with login box -->
        <div class="content-wrapper">
            <!-- Cyberpunk-style login box -->
            <div class="tech-box">
                <div class="cyberpunk-corner top-left"></div>
                <div class="cyberpunk-corner top-right"></div>
                <div class="cyberpunk-corner bottom-left"></div>
                <div class="cyberpunk-corner bottom-right"></div>

                <div class="tech-header">
                    <h1 class="title">DevOps自动化运维系统</h1>
                    <div class="tech-line"></div>
                </div>

                <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-form" @submit.prevent="handleLogin">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="用户名" class="tech-input">
                            <template #prefix>
                                <i class="fa fa-user"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码"
                            class="tech-input" @keyup.enter="handleLogin">
                            <template #prefix>
                                <i class="fa fa-lock"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :loading="loading" class="tech-button" @click="handleLogin">
                            <span class="btn-text">登录系统</span>
                            <span class="btn-glitch"></span>
                        </el-button>
                    </el-form-item>

                    <div class="tech-link">
                        没有账号? <a @click="goToRegister">立即注册</a>
                    </div>
                </el-form>

                <div class="tech-circles">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <app-footer class="login-footer" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import AppFooter from '@/components/Footer.vue'
import GlobalHeader from '@/components/GlobalHeader.vue'

const router = useRouter()
const store = useAppStore()

const loginFormRef = ref<FormInstance>()
const loading = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return

  await loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      store.login(loginForm)
        .then(async () => {
          // 强制刷新用户信息
          await store.getUserInfo()
          console.log('登录成功，用户信息:', store.userInfo)
          router.push('/')
          loading.value = false
        })
        .catch(error => {
          let errorMessage = '登录失败，请检查用户名和密码'
          if (error.response && error.response.data && error.response.data.message) {
            errorMessage = error.response.data.message
          }
          ElMessage.error(errorMessage)
          loading.value = false
        })
    }
  })
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style lang="scss" scoped>
@use '../styles/tech-background.scss';

.tech-container {
    /* Setup flex column layout to handle footer correctly */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Add padding-top to accommodate global header */
    padding-top: 40px;
    box-sizing: border-box;
    position: relative;
}

.content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    margin-bottom: 60px; /* Space for footer */
}

.login-form {
    width: 100%;
    background: transparent !important;
}

.login-footer {
    position: relative;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: auto; /* Push to bottom of flex container */
}

@media screen and (max-height: 700px) {
    /* For very small screens, adjust the footer position */
    .content-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 40px;
    }

    .tech-box {
        padding: 20px;
        background: transparent !important;
    }

    .tech-header {
        margin-bottom: 15px;
    }
}
</style>